<template>
	<view class="muIncome">
		<view class="waterBox" v-for="(item, index) in listData" :key="index">
			<view class="boxHead">
				<view class="headLeft">
					{{item.money}}
					كىرىمىم
				</view>
				<view class="headRgt">
					{{item.time}}
					<image class="sanjiao" src="/static/images/air-sanjiao.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="boxContent">
				<view class="itemContent" v-for="(childrenItem, childrenIndex) in item.list" :key="childrenIndex">
					<view class="contentMoney">
						{{childrenItem.number}}
					</view>
					<view class="contentRgt">
						<view class="rgtTitle">
							{{childrenItem.title}}
						</view>
						<view class="rgtTime">
							{{childrenItem.addTime}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { userSpreadIncome } from '@/api/dailyLife.js'
	export default {
		data() {
			return {
				listData: [],
				page: 1,
				isLoadMore: false
			};
		},
		methods: {
			async loadData() {
				uni.showLoading({
					title: ''
				});
				try{
					let resData = await userSpreadIncome({
						page: this.page
					})
					if (resData.data.length) {
						if (this.listData.length) {
							// 当前数据最后显示的月份
							const endTime = this.listData[this.listData.length - 1].time;
							// 新数据开始的月份
							const startTime = resData.data[0].time;
							// 如果下一页的月份和之前的一样 进行数据合并
							if (endTime === startTime) {
								this.listData[this.listData.length - 1].list = this.listData[this.listData.length - 1].list.concat(resData.data[0].list);
								resData.data.shift()
							}
						}
						
						this.listData = this.listData.concat(resData.data);
						this.isLoadMore = false
					} else {
						this.isLoadMore = true
					}
					uni.hideLoading();
				}catch(e){
					if(this.page > 1){
						this.page-=1
					}
					console.log('catch', e);
					this.isLoadMore = false
					uni.hideLoading();
				}
			}
		},
		onLoad() {
			this.loadData()
		},
		onReachBottom: function() {
			if (!this.isLoadMore) {
                this.isLoadMore = true
                this.page+=1
				this.loadData();
			}
		}
	}
</script>

<style lang="scss">
	.muIncome {
		background-color: #fff;
		.waterBox {
			.boxHead {
				width: 750rpx;
				height: 120rpx;
				background: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx;
				
				.headLeft {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
				
				.headRgt {
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 27rpx;
					color: #2f2f2f;
					font-size: 28rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					
					.sanjiao {
						margin-left: 10rpx;
						width: 12rpx;
					}
				}
			}
			.boxContent {
				padding: 0rpx 40rpx;
				
				.itemContent {
					padding: 30rpx 0rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 2rpx solid #f6f6f6;
					
					&:last-child {
						border-bottom: none;
					}
					
					.contentMoney {
						font-size: 36rpx;
						font-weight: 500;
						color: #E9550E;
					}
					.contentMoney {
						.rgtTitle {
							height: 32rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #666666;
						}
						.rgtTime {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 24rpx;
							margin-top: 16rpx;
						}
					}
				}
			}
		}
	}
</style>
